<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        /* *{padding: 0;margin: 0;} */
        .wrap{
            width: 200px;
            height: 200px;
            background-color: #6ff;
            /* margin: 20px; */
            overflow: hidden;
        }
        .sub{
            width: 100px;
            height: 100px;
            background-color: grey;
            margin: 50px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div>
            <h3>.stop</h3>
            <div class="wrap" @click="wrapHandler">
                <div class="sub" @click.stop="subHandler"></div>
            </div>
        </div>
        <div>
            <h3>.prevent</h3>
            <div>
                <a @click.prevent href="https://www.baidu.com">阻止a跳转</a>
                <form @submit.prevent action="https://www.baidu.com">
                    <button>阻止表单跳转</button>
                </form>
            </div>
        </div>
        <div>
            <h3>.self</h3>
            <div class="wrap" @click.self="wrapHandler">
                <div class="sub" @click="subHandler"></div>
            </div>
        </div>
        <div>
            <h3>.capture</h3>
            <div class="wrap" @click.capture="wrapHandler">
                <div class="sub" @click.capture="subHandler"></div>
            </div>
        </div>

        <div>
            <h3>.once</h3>
            <div class="wrap" >
                <div class="sub" @click.once="subHandler"></div>
            </div>
        </div>
    </div>
</body>
<script>
    // v-on  绑定事件
    // 用法:
    // v-on:参数="指令值"     
    // 参数=> 绑定的事件类型   
    // 指令值: 
    //    1. javascript表达式=> 事件触发时执行   
    //    2. 函数(事件处理函数)   -> 此函数直接绑给事件  -> 事件触发时直接执行该函数   
    //    3. 函数调用
    //    4. 传入箭头函数

    // Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。
    // v-on:参数.修饰符="指令值"     
    // 参数=> 绑定的事件类型   

    // 修饰符 => 可以在事件触发时, 对事件进行修饰符
    // .stop    阻止事件传播
    // .prevent  阻止浏览器的默认行为
    // .capture  事件触发时,以事件捕获形式传播
    // .self     只有绑定事件的元素本身可以触发
    // .once     事件只触发一次
    // .passive  事件会立即触发一次 .passive 修饰符尤其能够提升移动端的性能。

    // 指令值: 
    //    1. javascript表达式=> 事件触发时执行   
    //    2. 函数(事件处理函数)   -> 此函数直接绑给事件  -> 事件触发时直接执行该函数   
    //    3. 函数调用
    //    4. 传入箭头函数

    // 简写:
    // v-on:  可以简写为 @


   var vm =  new Vue({
        el: "#app",
        data: {
            msg: "hello",
            count:1,
        },
        methods: {
            wrapHandler(){
                console.log("wrap被点击");
            },
            subHandler(e){
                // e.stopPropagation();
                console.log("sub被点击");
            }
        }
    })
    console.log(vm);


</script>

</html>